<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        table {
            border-collapse: collapse;
            text-align: center;
            background-color: #74A6A8;
        }

        thead {
            background-color: #559294;
        }

        tr,
        td {
            border: 2px solid #7db6f7;
            padding: 8px 16px;
        }

        button {
            border: 2px solid #4b88ce;
            background-color: #f4C2E3;
            border-radius: 5px;
        }

        .active {
            background-color: #75adaf;
        }
    </style>
</head>

<body>
    <div id="app">
        <template v-if="books.length">
            <table>
                <thead>
                    <tr>
                        <td>序号</td>
                        <td>书籍名称</td>
                        <td>出版日期</td>
                        <td>价格</td>
                        <td>购买数量</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books" :key="item.id" @click="rowclick(index)"
                        :class="{active:index===nowindex}">
                        <td>{{index+1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.data}}</td>
                        <td>{{showprice(item.price)}}</td>
                        <td>
                            <button v-bind:disabled="item.count<=1" @click="down(index,item)">-</button>
                            {{item.count}}
                            <button @click="up(index,item)">+</button>
                        </td>
                        <td>
                            <button @click="deletebook(index,item)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <h2>总价：{{showprice(allprice)}}</h2>
        </template>
        <template v-else>
            <h1>快去买书！</h1>
        </template>
    </div>
    <script src="./books.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //用vue创建app
        const app = Vue.createApp({
            // template: `

            // `,
            data() {
                return {
                    books: books,
                    nowindex: -1
                }
            },
            computed: {
                allprice() {
                    // 1.直接遍历
                    let price = 0
                    for (let i = 0; i < this.books.length; i++) {
                        price += this.books[i].price * this.books[i].count;
                    }
                    return price

                    // for (const item of this.books) {
                    //     price += item.price * item.count;
                    // }
                    // return price

                    //2.高级函数
                    // return this.books.reduce((preValue, item) => {
                    //     return preValue + item.price * item.count
                    // }, 0)
                }
            },
            methods: {
                //加了一个方法拼接人民币符号
                showprice(price) {
                    return "￥" + price
                },
                // 两种 只改变一个id的按钮
                up(index, item) {
                    item.count++
                },
                down(index) {
                    this.books[index].count--
                },
                deletebook(index, item) {
                    this.books.splice(index, 1)
                },
                rowclick(index) {
                    this.nowindex = index
                    // console.log("点击了");
                }
            }
        })
        //挂载app
        app.mount("#app")
    </script>

</body>

</html>